<template>
  <div id="manage-edit-column" v-loading="loading">
    <div class="add-column-btn">
      <el-button @click="addcolumn">添加专栏</el-button>
    </div>
    <BlogTabs :list="list">
      <template v-slot:column>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="图像">
            <template slot-scope="scope">
              <div class="column-img">
                <img v-if="scope.row.img" :src="scope.row.img" />
                <img v-else src="~@/assets/img/column/default.png" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="专栏类别">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="文章数">
            <template slot-scope="scope">
              {{ scope.row.articleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleManage(scope.row)">管理</el-button>
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <edit-dialog ref="edit" @refresh="getData" />
        <manage-dialog ref="manageDialog" @refresh="getData" />
      </template>
    </BlogTabs>
  </div>
</template>

<script>
import editDialog from './column-edit-dialog.vue'
import manageDialog from './column-manage-dialog.vue'
export default {
  created() {
    this.getData()
  },
  components: {
    editDialog,
    manageDialog
  },
  data() {
    return {
      loading: false,
      list: [
        {
          name: 'column',
          label: '专栏管理',
          id: 1
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleManage(row) {
      this.$refs.manageDialog.showDialog({
        columnId: row.id,
        columnName: row.name
      })
    },
    handleEdit(row) {
      this.$refs.edit.showDialog({
        type: 'edit',
        data: row
      })
    },
    addcolumn() {
      this.$refs.edit.showDialog({
        type: 'add'
      })
    },
    handleDelete(row) {
      this.$confirm(`确认删除【${row.name}】专栏？`)
        .then(() => {
          // this.$message.success('删除成功')
          this.$ajax({
            url: this.$ajax.setUrl(`/column/${row.id}`),
            method: 'delete',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.getData()
              // this.$message.success(data.data || data.msg)
              this.$message.success('删除成功')
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {
          // 点击取消会发送错误。
        })
    },
    getData() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('/column'),
        method: 'get',
        params: this.$ajax.setParams()
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            data.data.forEach((item) => {
              item.articleNumber = item.Articles.length
            })
            this.tableData = data.data
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss">
#manage-edit-column {
  position: relative;
  .add-column-btn {
    position: absolute;
    right: 0px;
    z-index: 88;
  }
  .column-img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
